//蓝光使用情况（功能12）

<template>
  <div>
    <blockquote>数据截止至2021年8月9日</blockquote>
    <el-row>
      <el-button style="float: left" type="primary" @click="open"
        >编辑数据</el-button
      >
    </el-row>
    <div id="blueRay" :style="{ width: '1000px', height: '700px' }" />

    <el-drawer
      title="蓝光使用情况表"
      :visible.sync="draw"
      direction="rtl"
      size="60%"
    >
      <el-row>
        <el-button
          @click="handleAdd()"
          size="mini"
          style="margin-bottom: 15px; float: left; margin-left: 20px"
          >添加数据</el-button
        >
      </el-row>
      <el-row>
        <el-input
        @input="changeTotal()"        
          type="text"
          v-model="search"
          size="mini"
          placeholder="搜索蓝光画质"
          style="width: 500px; float: left; margin-left: 20px"
        />
      </el-row>
      <el-table
        :default-sort="{prop: 'count',order:'descending'}"
        :data="
          tableData.filter(
            (data) => !search || data.blueRayMBitRate.includes(search)
          ).slice((currentPage - 1) * pageSize, currentPage * pageSize)
          
        "
        style="width: 96%; margin-left: 20px"
      >
        <el-table-column
          property="blueRayMBitRate"
          label="蓝光画质"
        ></el-table-column>
        <el-table-column property="count" label="数量" align="center"></el-table-column>

        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <!-- <el-button @click="handleAdd()" size="mini">添加数据</el-button>
            <el-input
              type="text"
              v-model="search"
              size="mini"
              placeholder="搜索蓝光率"
            /> -->
          </template>

          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
              <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="totalCount"
    ></el-pagination>  
    </el-drawer>

    <!-- 修改的对话框 -->
    <template>
      <el-dialog title="修改数据" :visible.sync="editDialogue" width="30%">
        <el-form label-width="80px">
          <el-form-item label="蓝光画质">
            <el-input v-model="changeData.blueRayMBitRate"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="changeData.count" type="number"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleEditCancle()">取消</el-button>
          <el-button type="primary" @click="handleEditSure()">确定</el-button>
        </span>
      </el-dialog>
    </template>

    <!-- 添加的对话框 -->
    <template>
      <el-dialog title="添加数据" :visible.sync="addDialogue" width="30%">
        <el-form label-width="80px">
          <el-form-item label="蓝光画质">
            <el-input v-model="changeData.blueRayMBitRate"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="changeData.count" type="number"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleAddCancle()">取消</el-button>
          <el-button type="primary" @click="handleAddSure()">确定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import stores from "@/store";
export default {
  data() {
    return {
      currentPage:1,
      pageSize:12,
      totalCount:50,         
      tableData: [
        {
          count: "",
          blueRayMBitRate: "",
          isBlueRay: "",
          id: "",
        },
      ],
      search: "",
      draw: false,
      editDialogue: false,
      addDialogue: false,
      changeData: {
        count: "",
        blueRayMBitRate: "",
        isBlueRay: "",
        id: "",
      },
    };
  },
  mounted() {
    this.$axios
      .post(stores.spring_url + "/blueray", "function12")
      .then((res) => {
        this.totalCount=res.data.tableData.length;
        console.log(res.data.tableData.length);
        this.tableData = res.data.tableData;
        this.drawLine(res.data.tableData);
       
       // 降序排序
        res.data.tableData.sort(function(obj1,obj2){

          let val1 = obj1.count
          let val2 = obj2.count
          return val2 - val1

        } )            
      });
  },
  methods: {
    changeTotal(){
          this.totalCount= this.tableData.filter(
            (data) => !this.search || data.blueRayMBitRate.includes(this.search)
          ).length
    },    
    handleCurrentChange(page) {
      this.currentPage = page;
    },          
    open() {
      this.draw = true;
    },

    handleEdit(index, row) {
      this.changeData.count = row.count;
      this.changeData.blueRayMBitRate = row.blueRayMBitRate;
      this.changeData.isBlueRay = row.isBlueRay;
      this.changeData.id = row.id;
      //console.log(this.changeData);
      this.editDialogue = true;
    },

    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get(stores.spring_url + "/blueray/delete", {
              params: { id: row.id },
            })
            .then((res) => {
              this.$router.go(0); //刷新页面
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleAdd(index, row) {
      this.addDialogue = true;
    },

    handleEditCancle() {
      this.editDialogue = false;
      //清零

      (this.changeData.count = ""),
        (this.changeData.blueRayMBitRate = ""),
        (this.changeData.isBlueRay = ""),
        (this.changeData.id = "");
    },
    handleAddCancle() {
      this.addDialogue = false;
      //清零

      (this.changeData.count = ""),
        (this.changeData.blueRayMBitRate = ""),
        (this.changeData.isBlueRay = ""),
        (this.changeData.id = "");
    },
    handleEditSure() {
      if(this.changeData.blueRayMBitRate==''){
        this.$alert("请输入蓝光分辨率","提示" ,{ confirmButtonText: "我知道了" });           
      }
      else if(this.changeData.count==''){
        this.$alert("请输入数量","提示" ,{ confirmButtonText: "我知道了" });           
      }
       else if(this.changeData.count<0){
        this.$alert("数量不能小于0","提示" ,{ confirmButtonText: "我知道了" });           
      }    
      else{
      this.$confirm("确定保存?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(stores.spring_url + "/blueray/edit", this.changeData)
            .then((res) => {
              if(res.data.code==1){
                this.$alert("该蓝光分辨率已存在，修改失败","提示" ,{ confirmButtonText: "我知道了" });     
              }else{
                this.$router.go(0); //刷新页面  
              }
              console.log("success");
            
            });
        })
        .catch(() => {});        
      }
    },
    handleAddSure() {
      if(this.changeData.blueRayMBitRate==''){
        this.$alert("请输入蓝光分辨率","提示" ,{ confirmButtonText: "我知道了" });           
      }
      else if(this.changeData.count==''){
        this.$alert("请输入数量","提示" ,{ confirmButtonText: "我知道了" });           
      }
       else if(this.changeData.count<0){
        this.$alert("数量不能小于0","提示" ,{ confirmButtonText: "我知道了" });           
      }      
      else{
        this.$confirm("确定添加?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .post(stores.spring_url + "/blueray/add", this.changeData)
              .then((res) => {
              if(res.data.code==1){
                this.$alert("该蓝光分辨率已存在，添加失败","提示" ,{ confirmButtonText: "我知道了" });     
              }else{
                this.$router.go(0); //刷新页面  
              }
              });
          })
          .catch(() => {});        
      }
    },

    drawLine(res) {
      //转换成name和value
      const usedData = [];
      for (let i of res) {
        //console.log(i);
        usedData.push({ name: i.blueRayMBitRate, value: i.count });
      }
      //usedData.push()
      const myChart = this.$echarts.init(document.getElementById("blueRay"));
      myChart.setOption({
        color:["#55efc4","#81ecec","#74b9ff","#a29bfe","#ffeaa7","#fab1a0","#ff7675","#FF9966","#ea7ccc"],
        title: {
          text: "蓝光使用情况",

          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "right",
          right: 10,
          top: 20,
          bottom: 20,
        },
        series: [
          {
            name: "蓝光使用情况",
            type: "pie",
            radius: "50%",
            data: usedData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>